const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入cleanPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 引入webpack_copy_plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');
// 引入css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入css压缩插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
// 导入热更新插件
const Webpack = require("webpack");


module.exports = {
    devServer: {
        contentBase: "./bundle",
        // 编译打包完成后是否需要自动打开
        open: true,
        // 指定端口号
        port: 80,
        // 配置跨域:
        /* 
        以下配置含义:
        这种方式只能解决开发阶段的跨域问题
        当我们在代码中发送/user时,dev-server会自动将地址替换为
        http://127.0.0.1:3000/user
        */
        /* proxy: {
            "/user": {
                target: "http://127.0.0.1:3000",
                changeOrigin: true, //跨名跨域
                secure: false, //https跨域
            },
            "/login": {
                target: "http://127.0.0.1:3000",
                changeOrigin: true, //跨名跨域
                secure: false, //https跨域
            },
        } */
        proxy: [{
            context: ["/user", "/login"],
            target: "http://127.0.0.1:3000",
            changeOrigin: true, // 域名跨域
            secure: false, // https跨域
            // 请求上面/user或者/login地址时会自动在前面添加/api
            pathRewrite: { "": "/api" } // 路径重写, 将路径中的api替换为空
        }],
        // 配置热更新插件
        hot: true, //开启热更新,只要开启了热更新就不会自动刷新网页了
        hotOnly: true, //哪怕不支持热更新也不要刷新网页
        /* 
        注意;
        dev-server只能解决项目开发阶段的问题,不能解决项目上线阶段的问题
        原因非常简单:因为项目上线之后时间打包好的文件上传吴福气,而打包好的文件中并没有devserver
        */

    },

    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCssAssetsPlugin({})],
    },
    devtool: "cheap-module-eval-source-map",
    mode: "production", // "production" | "development"
    entry: "./src/js/index.js",
    output: {
        filename: "js/bundle.js",
        path: path.resolve(__dirname, "bundle")
    },
    module: {
        rules: [
            // 打包js的规则
            {
                test: /\.js$/,
                exclude: /node_modules/, //告诉webpakc不处理哪个文件夹
                loader: "babel-loader",
                options: {
                    "presets": [
                        ["@babel/preset-env", {
                            // 告诉babel:只打包用到的东西(减少打包后js文件的体积)
                            useBuiltIns: "usage",
                        }]
                    ]
                }
            },
            // 打包图片规则
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 指定图片限制的大小
                        limit: 1024,
                        // 指定打包后文件名称
                        name: '[name].[ext]',
                        // 指定打包后文件存放目录
                        outputPath: 'images/',
                    }
                }]
            },
            // 打包CSS规则
            {
                test: /\.css$/,
                // use: [ 'style-loader', 'css-loader' ]
                use: [{
                        // loader: "style-loader"
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: true
                        }
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: {
                                localIdentName: '[path][name]__[local]--[hash:base64:5]'
                            },
                        }
                    },
                    {
                        loader: "postcss-loader"
                    }
                ]
            },
            // 打包LESS规则
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }, {
                    loader: "postcss-loader"
                }]
            },
            // 打包SCSS规则
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }, {
                    loader: "postcss-loader"
                }]
            },
            // 打包icon/font规则,打包字体图标规则
            {
                test: /\.(eot|json|svg|ttf|woff|woff2)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        // 指定打包后文件名称
                        name: '[name].[ext]',
                        // 指定打包后文件存放目录
                        outputPath: 'font/',
                    }
                }]
            },
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            minify: {
                collapseWhitespace: true,
            }
        }),
        new CleanWebpackPlugin(),
        // 复制插件里面
        new CopyWebpackPlugin(
            [{ from: "./doc", to: "doc" }]
        ),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),
        new Webpack.HotModuleReplacementPlugin(),
    ],


};